<template>
    <div class="main">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
                <el-button type="success" size="small" icon="el-icon-circle-plus" plain @click="showAdd()">新建H5活动</el-button>
            </div>
            <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>
            <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="活动Id" prop="activityId" width="300"></el-table-column>
                <el-table-column align="center" label="标题" prop="name">
                    <template slot-scope="scope">
                        <a style="color: #409eff" target="_blank" :href="getActivityUrl({id: scope.row.activityId})">
                            {{scope.row.name}}
                        </a>
                    </template>
                </el-table-column>
                <!--<el-table-column align="center" label="banner">
                    <template slot-scope="scope">
                        <img :src="scope.row.banner" alt="" height="60"/>
                    </template>
                </el-table-column>-->
                <el-table-column align="center" label="活动开始时间" width="160">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.startTime, 'YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="活动结束时间" width="160">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.stopTime, 'YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="是否启用" width="90">
                    <template slot-scope="scope">
                        {{scope.row.status?'是':'否'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间" width="160">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="200" v-if="rightsButtons['add'] || rightsButtons['edit']">
                    <template slot-scope="scope">
                        <el-button v-if="rightsButtons['edit']" type="primary" size="mini" plain @click="showEdit(scope.row)">编辑</el-button>
                        <el-button v-if="rightsButtons['add']" type="success" size="mini" plain @click="showAdd(scope.row)">复制</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>
<script>
  import searchForm from '../../../components/searchForm/index'
  export default {
    name: 'activityH5',
    components: {
      searchForm
    },
    data(){
      return {
        listQuery: {
          name: '',
          status: '',
          jumpType: 1,
          pageIndex: 1,
          pageSize: 10
        },
        queryConfig: [
          {
            prop: 'name',
            type: 'input',
            label: '活动名称'
          },
        ],
        listLoading: false,
        list: [],
        listTotal: 0
      }
    },
    activated(){
      this.getList();
    },
    created(){
      if (this.$store.getters.cachedViews.length === 0) this.getList()
    },
    // beforeRouteEnter (to, from, next) {
    //   console.log('在路由独享守卫后调用');
    //   next(vm => {
    //       if (from.name==='activityH5Add') {
    //         vm.listQuery={
    //           name: '',
    //           status: '',
    //           jumpType: 1,
    //           pageIndex: 1,
    //           pageSize: 10
    //         }
    //         vm.getList()
    //       }
    //   })
    // },
    methods: {
      getList() {
        this.listLoading = true;
        this.request({
          url: '/bsnl-activity/activity/query',
          method: 'post',
          data: this.listQuery
        }).then(({data, totalCount}) => {
          let isHide = false
          let list = data.map(i => {
            try {
              isHide = JSON.parse(i.comment).isHide || false
            } catch (e){
              isHide = false
            }
            return {
              ...i,
              isHide
            }
          })
          this.list = list;
          this.listTotal = totalCount;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      // 搜索
      search() {
        this.listQuery.pageIndex = 1;
        this.getList();
      },
      // 切换分页
      handleCurrentChange(page) {
        this.listQuery.pageIndex = page;
        this.getList();
      },
      // 切换分页数
      handleSizeChange(pageSize) {
        this.listQuery.pageSize = pageSize;
        this.getList();
      },
      // 新建H5活动
      showAdd(detailData){
        if(detailData){
          sessionStorage.setItem('h5ActivityDetail', JSON.stringify({ ...detailData, id: '' }));
        } else {
          sessionStorage.removeItem('h5ActivityDetail');
        }
        this.$router.push({ name: 'activityH5Add' });
      },
      // 编辑H5活动
      showEdit(detailData){
        sessionStorage.setItem('h5ActivityDetail', JSON.stringify(detailData));
        this.$router.push({ name: 'activityH5Edit' });
      }
    }
  }
</script>
